<!-- App.vue -->
<template>
  <el-config-provider :locale="zhCn">
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <keep-alive :include="cachedRoutes">
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </el-config-provider>
</template>

<script setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const cachedRoutes = ref([])
const route = useRoute()

watch(
  route,
  (newVal) => {
    if (newVal.meta.keepAlive && !cachedRoutes.value.includes(newVal.name)) {
      cachedRoutes.value.push(newVal.name)
    }
  },
  { immediate: true },
)
</script>
